<template>
  <a-card class="cardClass">
    <div>
      <template v-if="record?.passed == 1">
        <a-tag color="#00a7aa">
          <template #icon>
            <CheckSquareTwoTone class="icon" twoToneColor="#00a7aa" />
          </template>
          通过
        </a-tag>
      </template>
      <template v-else>
        <a-tag color="red">
          <template #icon>
            <CloseSquareTwoTone class="icon" twoToneColor="red" />
          </template>
          不通过
        </a-tag>
      </template>
    </div>
    <div style="text-align: center">
      <span class="score">{{ record?.maxScore }}</span>
      分
    </div>
    <div style="font-size: 20px;text-align: center">
      考试成绩
    </div>
    <a-divider />
    <div class="detail">
      <a-row class="info">
        <a-col :span="8">{{ record?.questionCount }}</a-col>
        <a-col :span="8">{{ record?.totalScore }}</a-col>
        <a-col :span="8">{{ record?.qualifyScore }}</a-col>
      </a-row>
      <a-row class="info" style="color:#1d75b3;">
        <a-col :span="8">题数</a-col>
        <a-col :span="8">总分</a-col>
        <a-col :span="8">及格分</a-col>
      </a-row>
    </div>
  </a-card>
</template>

<script lang="ts" setup>
import { CheckSquareTwoTone, CloseSquareTwoTone } from "@ant-design/icons-vue";
// Emits声明
const emit = defineEmits(["register", "success"]);

const props = defineProps({
  record: {
    type: Object,
    default: {}
  }
});

</script>

<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}

:deep(.ant-tag ) {
  font-size: 14px;
  line-height: 25px;
}

.cardClass {
  width: 100%;
  background-color: #f7fafb
}

.score {
  font-size: 50px;
  font-weight: 700;
  color: #00a7aa
}

.detail {
  margin-top: 30px;
  font-size: 16px;
}

.info {
  text-align: center;
  line-height: 25px;
}

.icon {
  font-size: 15px;
}
</style>
